<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-task</title>
     
	<link rel="stylesheet" href="${basePath }/colorpicker/css/colorpicker.css" type="text/css">
   
    <script type="text/javascript" src="${basePath }/colorpicker/js/jquery.js"></script>
	<script type="text/javascript" src="${basePath }/colorpicker/js/colorpicker.js"></script>
    <script type="text/javascript" src="${basePath }/colorpicker/js/eye.js"></script>
    <script type="text/javascript" src="${basePath }/colorpicker/js/utils.js"></script>
    <script type="text/javascript" src="${basePath }/colorpicker/js/layout.js?ver=1.0.2"></script>
    
	<%@ include file="../include/head.jsp" %>
    
    
	<meta charset="UTF-8">
</head>
<body class="crm">
	
	<jsp:include page="../include/top.jsp">
		<jsp:param value="deal" name="tag"/>
	</jsp:include>
	
	<div class="container">
		<div class="row">
			<div class="span8 offset2">
				<div class="well screen">
					<div class="page-header header">	
						机会分类
					</div>
					<div class="main">
					<p>修改分类会影响到同事们的机会。比如，如果您将“设计”改为“LOGO设计”，所有分类为“设计”的机会都将改为“LOGO设计”。 请确认您的修改会通知到所有同事。</p>

					<div class="new">
						<form accept-charset="UTF-8" action="save.action" class="well form-inline"  id="category_form" method="post">
							<input type="hidden" value="settings" name="from">
							<input type="hidden" value="ChanceCategory" name="type">
							
							<input name="dealtype.type" placeholder="添加一个任务分类..." autocomplete="off">
							<button type="submit" class="btn" disabled="disabled">添加</button>
							
							<img id="indicator" src="${basePath}/img/workxp_sprites.png" style="display:none">
						</form>
					</div>
					

		<table class="table crm-table" id="dealtype">
			<tbody>
			
			<c:forEach items="${dealtypeList }" var="dealtype">
			
<tr id="category_29544" >
	<td width="20px">
		<span id="category_29544_color" class="selected_color_swatch color_swatch" style="background-color:#${dealtype.color}"></span>
	</td>
	
	<td style="font-size:14px" >
		<div class="edit" style="display:none">
			<form accept-charset="UTF-8" action="edit" class="form-inline well" id="edit_category" method="post">
				<input type="hidden" name="dealtype.id" value="${dealtype.id }"/>
				<input type="hidden" name="dealtype.createtime" value="${dealtype.createtime }">
				<input autocomplete="off" id="category_name" name="dealtype.type" class="span2" type="text" value=${dealtype.type } style="display:inline"/>
				<input  maxlength="6" size="6" id="colorpickerField1" value="${dealtype.color}" class="span2" name="dealtype.color" style="display:inline"/>
				<button type="submit" class="btn btn-primary">保存</button>
				<button class="btn cancel">取消</button>
			</form>
		</div>
		<div class="show">
			${dealtype.type}
		</div>

		<img alt="Indicator" class="spinner" id="operation_wait_29544" src="${basePath}/img/indicator.gif" style="height:5px;width:21px;vertical-align: middle; display: none;">
	</td>
	
	<td class="actions">
		<a href="#" class="icon icon-edit" rel="tooltip" data-original-title="编辑分类名称"></a>
		<a href="#" class="icon icon-trash" id="${dealtype.id }" onclick="delDealtype(this)"  data-method="delete" rel="tooltip nofollow" data-original-title="删除这个分类"></a>
	</td>
</tr>


					
			

					</c:forEach>
						
						</tbody>
					</table>

			<%-- <form action="${basePath }/deal/add.action" class="button_to" method="get">
				<div>
					<input class="btn" type="submit" value="完成编辑，返回">
					
				</div>
			</form> --%>
			<a href="${basePath }/deal/add.action" >完成编辑，返回</a>
			
		<script type="text/javascript">
			function delDealtype(obj) {
				id = $(obj).attr("id");
				$.get("delete.action",{"dealtype.id":id},function(){
						$(obj).parent().parent().remove();
				});
			}
		</script>
		
<script type="text/javascript" charset="utf-8">
	
	
	
	function toggleEditForm(tr) {
		tr.find(".edit").toggle();
		tr.find(".show").toggle();
	}
	
	$(document).ready(function() {
		$("#dealtype").click(function(e) {
			var target = $(e.target);
			if(target.is("a[data-id] span")) {
				e.preventDefault();
				setCategoryColor(target.parent().attr("data-id"), target.attr("data-color"));
			} else if(target.parent().is(".menu_target")) {
				e.preventDefault();
				showColorPicker(target.parent().attr("data"));
			}	else if(target.is(".menu_target")) {
				e.preventDefault();
				showColorPicker(target.attr("data"));
			} 
		});
		
		$("#dealtype").on("click", ".icon-edit, button.cancel", function(e) {
			e.preventDefault();
			toggleEditForm($(e.target).parents("tr"));
		});

		
		setInterval(function() {
			var submit = $(".new :submit");
			$.trim($(".new :text").val()) == "" ? submit.attr("disabled", "disabled") : submit.removeAttr("disabled");
		}, 500);
	

		
		/* $('#colorpickerField').ColorPicker({
					onSubmit: function(hsb, hex, rgb, el) {
						$(el).val(hex);
						$(el).ColorPickerHide();
					},
					onBeforeShow: function () {
						$(this).ColorPickerSetColor(this.value);
					}
				})
				.bind('keyup', function(){
					$(this).ColorPickerSetColor(this.value);
				});
		 */
	});
	

	
</script>

<style type="text/css" media="screen">
	a.menu_target:hover{
		text-decoration:none;
	}
	.category-form {
		margin: 0px;
	}
	div.edit_swatch {
		width:85px;
	}
	span.color_swatch {
	  border: 1px solid #CCCCCC;
	  display: inline-block;
	  height: 18px;
	  vertical-align: middle;
	  width: 50px;
	}
	div.edit_swatch a {
	  background: -moz-linear-gradient(center top , #FFFFFF 30%, #EFEFEF 100%) repeat scroll 0 0 transparent;
	  border: 1px solid #999999;
	  padding: 2px 6px 2px 7px;
	}
	div.edit_swatch a {
	  display: block;
	}
	ul.picker {
		list-style: none outside none;
	  background: url(/assets/workxp_sprites.png) no-repeat scroll -402px -574px transparent;
	  margin: -1px 0 0 !important;
	  padding: 10px 0 12px 9px !important;
	  position: absolute;
	  width: 189px;
	  z-index: 99;
	}
	ul.picker li {
	  float: left;
	  margin: 0 8px 8px 0;
	  padding: 0;
	  width: auto;
	}
	ul.picker li a, ul.picker a:hover {
	  border: medium none !important;
	  margin: 0 !important;
	  padding: 0 !important;
	}
	ul.picker li.selected {
	  border: 1px solid #333333;
	  margin: -1px 7px 7px -1px !important;
	}
	div.edit_swatch {
	  border-bottom: 1px solid #CCCCCC;
	  border-right: 1px solid #CCCCCC;
	}
</style>

					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
